<template>
  <div class="w-100 min-vh-100 flex-grow-1">
    <div class="ratio ratio-16x9">
      <img src="@/assets/设计.png" alt="加载失败">
      <div>
        <div class="container h-100 d-flex flex-column justify-content-center align-items-center">
          <div class="ms-auto p-2 border border-2 bg-white">
            <div class="h3 text-center" style="background-image: linear-gradient(0deg, #FFFFFF 21%, #EFFFF9 100%);">
              我要装修
            </div>
            <el-carousel ref="carousel" indicator-position="none" :loop="false" :autoplay="false"
                         height="25rem" style="width: 20rem;">
              <el-carousel-item>
                <div class="h5 text-center">1/3 选择您的装修面积</div>
                <div class="row g-3">
                  <div v-for="(item,index) in areaList" :key="index" @click="activeItem('area',item)" class="col-6">
                    <div class="ratio ratio-1x1">
                      <div class="card d-flex justify-content-center align-items-center"> {{ item.desc }}</div>
                    </div>
                  </div>
                </div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="h5 text-center">2/3 选择您的装修类型</div>
                <div class="row g-3">
                  <div v-for="(item,index) in houseList" :key="index" @click="activeItem('house',item)" class="col-6">
                    <div class="ratio ratio-1x1">
                      <img :src="item.img" alt="">
                    </div>
                    <div class="d-flex justify-content-center align-items-center text-bold"> {{ item.desc }}</div>
                  </div>
                </div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="h5 text-center">3/3 选择您的装修风格</div>
                <div class="row g-3">
                  <div v-for="(item,index) in styleList" :key="index" @click="activeItem('style',item)" class="col-6">
                    <div class="ratio ratio-1x1">
                      <img :src="item.img" alt="">
                    </div>
                    <div class="d-flex justify-content-center align-items-center text-bold"> {{ item.desc }}</div>
                  </div>
                </div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="alert alert-success">
                  <strong>{{ form.area.desc }}</strong>
                </div>
                <div class="alert alert-success">
                  <strong>{{ form.house.desc }}</strong>
                </div>
                <div class="alert alert-success">
                  <strong>{{ form.style.desc }}</strong>
                </div>
                <div class="mt-2">
                  <div>手机:
                    <el-input v-model="form.phone" placeholder="请输入联系电话"></el-input>
                  </div>
                  <div>您的称呼:
                    <el-input v-model="form.phone" placeholder="请输入联系电话"></el-input>
                  </div>
                </div>
                <div class="small text-center text-secondary">*注: 我们承诺对您的信息绝对保密</div>
                <div class="d-flex justify-content-center">
                  <button @click="submit" class="btn bg-success">立即预约</button>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {getJson, postJson} from "@/api/http";
import {Customer_create, SysEnum_getPage} from "@/api/api";
import {EnumImgType} from "@/api/config";

export default {
  name: "DecorationPlan",
  data() {
    return {
      form: {
        area: '',
        house: '',
        style: '',
        phone: '',
      },
      tagList: [],
      areaList: [{desc: '60㎡以下'}, {desc: '60-100㎡'}, {desc: '100-150㎡'}, {desc: '150㎡以上'},],
      houseList: [
        {desc: '毛坯新房', img: require('@/assets/毛坯新房.png')},
        {desc: '精装新房', img: require('@/assets/精装新房.png')},
        {desc: '旧房翻新', img: require('@/assets/旧房翻新.png')},
        {desc: '局部改造', img: require('@/assets/局部改造.png')},
      ],
      styleList: [
        {desc: '现代简约', img: require('@/assets/现代简约.png')},
        {desc: '中式风格', img: require('@/assets/中式风格.png')},
        {desc: '奶油风', img: require('@/assets/奶油风.png')},
        {desc: '日式风', img: require('@/assets/日式风.png')},
      ],
    }
  },
  methods: {
    async init() {
      let ret = await getJson(SysEnum_getPage, {groupCode: EnumImgType})
      this.tagList = ret.data.records;
    },
    async submit() {
      let data = {
        phone: this.form.phone,
        area: this.form.area.desc,
        style: this.form.style.desc,
        house: this.form.house.desc,
      }
      let result = await postJson(Customer_create, data)
      if (result.code === 1) {
        this.$message("操作成功");
      } else {
        this.$message('操作失败');
      }
    },
    activeItem(key, value) {
      this.$refs.carousel.next()
      this.form[key] = value
    },
  },
  created() {
    this.init()
  }
}
</script>

<style scoped>
</style>